<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"  xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j">
	<div id="container">
		<h:form>
			<div id="navi">
				<span>
					<h:graphicImage value="/resources/image/homeicon.jpg" alt="image" width="15" height="15"/>
					<h:outputLink value="index.xhtml" class="navi_button">Back to Entry</h:outputLink>
				</span>
				|
				<span>
					<h:graphicImage value="/resources/image/searchicon.jpg" alt="image" width="15" height="15"/>
					<h:outputLink value="customerSearchOrder.xhtml" class="navi_button">Search Purchases</h:outputLink>
				</span>
				|
				<span>
					<h:outputLink value="browse.xhtml" class="navi_link">Browse</h:outputLink>
				</span>
				>
				<span class="navi_current">
					Shopping Cart
				</span>
				>
				<c:choose>
					<c:when test="#{cart.products.isEmpty()}">
						<span class="navi_future">Check Out</span>
					</c:when>
					<c:otherwise>
						<span>
							<h:outputLink value="checkout.xhtml" class="navi_link">Check Out</h:outputLink>
						</span>
					</c:otherwise>
				</c:choose>
				>
				<span class="navi_future">Confirm</span>
				>
				<span class="navi_future">Finish</span>
			</div>
			<div id="cart_decoration" ></div>
			<div id="cart_content">
				<div class="content_head">
					<span>Shopping Cart</span>
				</div>
				<div class="content_body">
					<rich:dataTable id="shopping_cart" value="#{cart.products}" var="productInCart" rows="#{browser.maxCountOfProductInCartPerPage}" styleClass="data" rendered="#{!cart.products.isEmpty()}">
						<rich:column style="width: 10%">
							<f:facet name="header">
								ID
							</f:facet>
							<h:outputText value="#{productInCart.product.id}" />
						</rich:column>
						<rich:column style="width: 45%">
							<f:facet name="header">
								Name
							</f:facet>
							<h:outputText value="#{productInCart.product.name}" />
						</rich:column>
						<rich:column style="width: 10%">
							<f:facet name="header">
								Unit Price
							</f:facet>
							AU$ <h:outputText value="#{productInCart.product.price}" />
						</rich:column>
						<rich:column style="width: 10%">
							<f:facet name="header">
								Quantity
							</f:facet>
							<rich:inputNumberSpinner minValue="1" maxValue="#{productInCart.product.stock}" value="#{productInCart.quantity}" inputSize="5" />
						</rich:column>
						<rich:column style="width: 10%">
							<f:facet name="header">
								Total Price
							</f:facet>
							AU$ <h:outputText value="#{productInCart.price}" />
						</rich:column>
						<rich:column style="width: 15%">
							<f:facet name="header">
								Operations
							</f:facet>
							<span class="cart_operations">
								<a4j:commandLink actionListener="#{cart.updateProductInCart(productInCart)}" render="@form">
									<h:graphicImage value="resources/image/edit.gif" title="Update the quantity of the product" />
								</a4j:commandLink>
							</span>
							<span class="cart_operations">
								<a4j:commandLink actionListener="#{cart.removeProductInCart(productInCart)}" render="@form">
									<h:graphicImage value="resources/image/delete.gif" title="Remove the product" />
								</a4j:commandLink>
							</span>
						</rich:column>
						<f:facet name="footer">
							<rich:dataScroller id="scroller" rendered="#{cart.products.size() > browser.maxCountOfProductInCartPerPage}" />
						</f:facet>
					</rich:dataTable>
					<c:if test="#{!cart.products.isEmpty()}">
						<div id="cart_foot">
							<h:outputText value="Grand Total: AU$ #{cart.totalPrice}" />
							<p><h:commandButton value="Clear all the shopping cart" action="#{cart.clear()}" /></p>
						</div>
					</c:if>
					<c:if test="#{cart.products.isEmpty()}">
						<div id="cart_content_body_empty">
							The shopping cart is empty!
						</div>
					</c:if>
				</div>
			</div>
			<div class="footnav">
				<span><h:commandButton class="footnav_button" onclick="location.href='browse.xhtml'" value="&lt;&lt; Back" type="button" /></span>
				<span><h:commandButton class="footnav_button" onclick="location.href='checkout.xhtml'" value="Next &gt;&gt;" type="button" disabled="#{cart.products.isEmpty()}" /></span>
			</div>
			<rich:notifyMessages stayTime="5000" nonblocking="true" />
		</h:form>
	</div>
</ui:composition>
